<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<base th:href="@{/}" target="_self" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>后台管理 | 登录</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- Font Awesome -->
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- Ionicons -->
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" />
<!-- Theme style -->
<link rel="stylesheet" href="css/admin.min.css" />
<link rel="stylesheet" href="css/skins/skin-black.min.css" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
	<div class="wrapper">

		<div class="logo text-center" style="margin: 100px auto 50px auto;">
			<h1 class="">管理后台登录</h1>
		</div>

		<div class="" style="margin: 0px auto; width: 430px;">

			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title text-center">登录</h3>
				</div>
				<div class="panel-body">
					<form role="form" action="/login" method="post" id="main-form"
						class="form-horizontal">
						<input type="hidden" th:name="${_csrf.parameterName}"
							th:value="${_csrf.token}" />
						<fieldset style="margin-top: 20px;">
							<div class="form-group">
								<label class="col-lg-3 control-label ">用户名</label>

								<div class="col-lg-8">
									<input class="form-control" placeholder="请输入用户名"
										name="username" type="text" required="required"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-3 control-label ">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>

								<div class="col-lg-8">
									<input class="form-control" placeholder="请输入密码" name="password"
										type="password" required="required"/>
								</div>
							</div>

							<div class="form-group">
								<label class="col-lg-3 control-label">&nbsp;</label>

								<div class="col-lg-8">
									<button type="submit" class="btn btn-block bg-olive btn-bg">登录</button>
								</div>
							</div>

						</fieldset>
					</form>
				</div>
			</div>

		</div>
	</div>

	<!-- jQuery 2.2.3 -->
	<script src="js/jQuery/jquery-2.2.3.min.js"></script>
	<!-- Bootstrap 3.3.6 -->
	<script src="js/bootstrap.min.js"></script>
	<!-- AdminLTE App -->
	<script src="js/app.min.js"></script>

	<div layout:fragment="js">
		<script th:if="${hasError}">
			$(document).ready(function() {
				alert("用户名或密码错误");
			});
		</script>
		<script th:if="${logout}">
			$(document).ready(function() {
				alert("您已经退出登录");
			});
		</script>
		<script>
			$(document).ready(function() {
				var formSelector = '#main-form';

				var uname = $(input='[name="username"]').val();
				var pwd = $(input='[name="password"]').val();
				
				$(formSelector).on('submit', function(e) {
					if(uname==null||pwd==null)
						alert("请填写用户名和密码");
				});
			});
		</script>
	</div>

</body>
</html>